 {% load static %}
<!DOCTYPE html>
<html>
<head>
	<title>记账图表</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- bootstrap -->
   <link href="{% static 'login/css/bootstrap/bootstrap.css' %}" rel="stylesheet" />
    <link href="{% static 'login/css/bootstrap/bootstrap-responsive.css' %}" rel="stylesheet" />
    <link href="{% static 'login/css/bootstrap/bootstrap-overrides.css'%}" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="{% static 'login/css/layout.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'login/css/elements.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'login/css/icons.css' %}" />


    <!-- libraries -->
    <link href="{% static 'login/css/lib/jquery-ui-1.10.2.custom.css' %}" rel="stylesheet" type="text/css" />
    <link href="{% static 'login/css/lib/font-awesome.css' %}" type="text/css" rel="stylesheet" />
    <link href="{% static 'login/css/lib/morris.css' %}" type="text/css" rel="stylesheet" />

    <!-- this page specific styles -->
    <link rel="stylesheet" href="{% static 'login/css/compiled/chart-showcase.css' %}" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

    <!-- navbar -->
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
            <button type="button" class="btn btn-navbar visible-phone" id="menu-toggler">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="brand" href="#">个人记账系统</a>

            <ul class="nav pull-right">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle hidden-phone" data-toggle="dropdown">
                        个 人 中 心
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="/personal/">信息修改</a></li>
                        <li><a href="/logout/">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- sidebar -->
    <div id="sidebar-nav">
        <ul id="dashboard-menu">
            <li>
                <a href="/index/">
                    <i class="icon-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="/income/">
                    <i class="icon-signal"></i>
                    <span>收入记账管理</span>
                </a>
            </li>
            <li>
                <a href="/pay/">
                    <i class="icon-group"></i>
                    <span>支出记账管理</span>
                </a>
            </li>
            <li class="active">
                <a href="#">
                     <div class="pointer">
                        <div class="arrow"></div>
                        <div class="arrow_border"></div>
                    </div>
                    <i class="icon-picture"></i>
                    <span>记账图表</span>
                </a>
            </li>

        </ul>
    </div>

	<!-- main container -->
    <div class="content">
        <div class="container-fluid">
            <div id="pad-wrapper" style="width: 800px;margin-left: -20px;">
            {{ html|safe }}
            </div>
              <div id="container" style="width: 600px;height:400px;"></div>
            <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
            <script type="text/javascript">
                 var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var app = {};
                    var option;
                    option = {
                      title: {
                        text: '近15天的收入支出总数',
                        subtext: '对比',
                        left: 'left'
                      },
                      legend: {
                        orient: 'vertical',
                        left: 'right'
                      },
                      series: [
                        {
                          name: '测试报告',
                          type: 'pie',   // 设置图表类型为饼图
                          radius: '50%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                          data:{{ data|safe }},
                          label: {
                            position: 'outside',
                            formatter: '{b}:{c} ({d}%)'
                        },
                          emphasis: {
                              itemStyle: {
                            // 高亮时点的颜色
                            color: 'Gold'
                        },
                        label: {
                            show: true,
                            // 高亮时标签的文字
                            formatter: '{b}:{c} ({d}%)'
                        }
                          }
                        }
                      ]
                    };
                     if (option && typeof option === "object") {
                        myChart.setOption(option);
                    }
            </script>
        </div>
    </div>

	<!-- scripts for this page -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="{% static 'login/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'login/js/jquery-ui-1.10.2.custom.min.js' %}"></script>
    <!-- knob -->
    <script src="{% static 'login/js/jquery.knob.js' %}"></script>
    <!-- flot charts -->
    <script src="{% static 'login/js/jquery.flot.js' %}"></script>
    <script src="{% static 'login/js/jquery.flot.stack.js' %}"></script>
    <script src="{% static 'login/js/jquery.flot.resize.js' %}"></script>
    <!-- morrisjs -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="{% static 'login/js/morris.min.js' %}"></script>
    <!-- call all plugins -->
    <script src="{% static 'login/js/theme.js' %}"></script>

</body>
</html>